import React, { Component } from 'react';
import styles from './css/cssTest.module.css';
import CssTestComponent from '../../components/cssTest/cssTest.jsx';
export default class CssTest extends Component {
    constructor(props) {
        super(props);
        this.state = {
            active: false,
        }
    }
    changeClassName() {
        let status = this.state.active
        this.setState({
            active: !status
        })
    }
    render() {
        return (
            <div className={styles.container}>
                <p className={styles.outer}>
                    测试局部css用例
                </p>
                <CssTestComponent className={styles.inner}></CssTestComponent>
                <ul>
                    <li> 要想支持 className=&#123;styles.XXX&#125; 必须在webpack里面设置css modules </li>
                    <li> 对应的类名会转换编译成其他字符 </li>
                    <li> &lt;CssTestComponent className=&#123;styles.inner&#125;&gt;&lt;/CssTestComponent&gt; 这样并不会对组件进行类名设置，而是会将className当作参数传到组件里面，参考vue</li>
                    <li className={`${styles.classNames_big} ${styles.classNames_color}`}>
                        多个类名
                    </li>
                    <li>
                        <p className={this.state.active ? `${styles.active}` : ''}>
                            三元运算符判断
                        </p>
                        <p className={this.state.active && `${styles.active}`}>
                            短路运算符运算------会报错但是也可以用
                        </p>
                        <button onClick={() => { this.changeClassName() }}>切换状态</button>
                        <span>
                            当前是否被激活:{this.state.active + ''}
                        </span>
                    </li>
                </ul>
            </div>
        )
    }

}